<template>
  <div class="faq-container">
    <h1 class="title">常见疑问</h1>
    <p class="contact-info">还有其他问题吗? 请通过 qq642160575@gmail.com 联系我们</p>
    
    <div class="faq-grid">
      <div class="faq-card" v-for="(item, index) in faqs" :key="index">
        <h3 class="faq-question">{{ item.question }}</h3>
        <p class="faq-answer">{{ item.answer }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const faqs = [
  {
    question: '是什么让Ghiblio Art与其他AI图像生成器不同',
    answer: 'Ghiblio是基于深入对 ChatGPT 4o 模型类型的开放卡片级接口，以其卓越的图像转换、细节生成的精确性而闻名。'
  },
  {
    question: '什么是ChatGPT 4o模型?',
    answer: 'ChatGPT 4o 是OpenAI公司发布的大语言模型，它不仅提供布局世界领先的模型生成功能，且具强大的能力用于解决全球。'
  },
  {
    question: '我可以生成哪些类型的图像?',
    answer: 'Ghiblio Art 不仅仅可以生成普通卡片级的图像，它其实可以生成各种风格的图片，包括真人风的写实风格，在输入框下方会提供多项风格选择，或通过，或通过，也可以选择其他风格，且提供提示词面板自定义风格。'
  },
  {
    question: '我需要具备绘画能力吗?',
    answer: '完全不需要！只要输入人文字描述，Ghiblio Art即使没有生成的绘画技巧也可以提供专业级的转化，细节处理创作。'
  },
  {
    question: '如何寻找灵感，以生成出彩的图片?',
    answer: '如果想生成出彩的，不需要写太多文字描述内容的描述，只可以从自然分析出图片的动作部分，你可以参考其他优秀的文本描述，高质量文字，高质量的词语可以帮助你提高。一般可以从你的创意+场景+小细节+人物特征+表情+姿态+服饰，方向去提供人工方面的描述，这样能生成更加出彩。'
  },
  {
    question: '为什么会出现报错: 您的内容违反了OpenAI内容规范，请修改您的图片或提示词试试?',
    answer: '受到AI模型内容规范条款的限制，有些内容违反了OpenAI内容规范，比如图片含有敏感政治内容或暴力、仇恨言论等。如果遇到，多尝试修改提示词或更换图片，或者尝试使用更加中性的描述词。这种情况通常只是临时的，不会影响后续使用。'
  },
  {
    question: '生成的图像可以商用吗?',
    answer: '原则上，您生成的图片属于您自己作品，您可以在个人范围内使用自由使用生成的图像。但请注意您提供的内容不会永久保存在我们的服务器上。'
  },
  {
    question: '我的内容隐私会安全吗?',
    answer: '我们非常重视用户隐私，您的图片和内容不会永久保存在我们的服务器上。但请注意，也不会对您提供的内容做人为备份，因此请自行保存重要内容。'
  },
  {
    question: '一次能生成多少张图片?',
    answer: '免费版本生成数量有限，付费更多需求，可以尝试我们的会员服务，按需选择不同套餐，包含更多次数，效果更好，生成时间更短。'
  },
  {
    question: '基于现片生成新片可以上传多张图片吗?',
    answer: '当前仅限上传单张图片，基于多张图片进行混合生成，可以参考我们的多张拼图功能。'
  },
  {
    question: 'Ghiblio是否可在移动设备上使用?',
    answer: '目前，我们的服务可以适配各种设备的浏览器，在移动设备上也可正常运行。我们正在积极开发专门的移动应用，以提供更好的用户体验。'
  },
  {
    question: '如何提交反馈报告问题?',
    answer: '我们非常欢迎您的反馈！您可以通过 qq642160575@gmail.com 联系我们的支持团队，您的意见对我们改进产品非常重要。'
  }
]
</script>

<style scoped>
.faq-container {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: transparent; /* 改为透明背景，使用App.vue中的背景色 */
  color: #fff;
  min-height: 100vh;
  will-change: transform; /* 提示浏览器优化变换 */
  -webkit-overflow-scrolling: touch; /* 在iOS上提供惯性滚动 */
  position: relative; /* 确保相对定位 */
  z-index: 2; /* 确保内容在蒙板之上 */
}

.title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #fff;
  transform: translateZ(0); /* 启用GPU加速 */
}

.contact-info {
  text-align: center;
  color: #aaa;
  margin-bottom: 3rem;  
  font-size: 1rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 20px;
  contain: layout style; /* 提高渲染性能 */
}

.faq-card {
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s ease;
  will-change: transform; /* 提示浏览器优化变换 */
  transform: translateZ(0); /* 启用GPU加速 */
  contain: content; /* 创建新的层叠上下文，提高渲染性能 */
}

.faq-card:hover {
  transform: translateY(-5px) translateZ(0);
}

.faq-question {
  color: #fff;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.faq-answer {
  color: #aaa;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
  
  .title {
    font-size: 2rem;
  }
}

/* 添加滚动条样式优化 */
.faq-container::-webkit-scrollbar {
  width: 8px;
}

.faq-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.faq-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* 减少移动端的动画效果 */
@media (max-width: 768px) {
  .faq-card {
    transition: none;
  }
  
  .faq-card:hover {
    transform: none;
  }
}
</style>
